<template>
    <div class="main-header">
        <div class="mh-left">{{ nowTime }}</div>
        <div class="mh-middle">{{ $t('screen.title') }}</div>
        <div class="mh-right">
            <div small-bg>
                <dv-decoration-11 style="width: 200px; height: 60px">
                    <div color-green font-600 bg="~ dark/0">
                        {{ curStation.stationName }}
                    </div>
                </dv-decoration-11>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import dayjs from 'dayjs';
    import {
        ref,
        reactive,
        onMounted,
        toRefs,
        onBeforeUnmount,
        computed,
    } from 'vue';
    import { getUserInfo } from '@/api/user';
    import { useStation } from '@/store';

    const userStation = useStation();
    const curStation = computed(() => userStation.curStation);
    const weeks = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
    ];
    const timeId = ref();
    const state = reactive({
        nowTime: `${dayjs().format('YYYY-MM-DD HH:mm:ss')}  ${
            weeks[dayjs().day()]
        }`,
    });

    function getNowTime(nowTime: any): any {
        timeId.value = setInterval(() => {
            nowTime.value = `${dayjs().format('YYYY-MM-DD HH:mm:ss')}  ${
                weeks[dayjs().day()]
            }`;
        }, 1000);
    }
    const { nowTime } = toRefs(state);
    const userInfo = ref();

    const loadUserInfo = async () => {
        const data: any = await getUserInfo();

        userInfo.value = data.result;
    };
    loadUserInfo();
    onMounted(() => {
        getNowTime(nowTime);
    });
    onBeforeUnmount(() => {
        clearTimeout(timeId.value);
    });
</script>

<style lang="less" scoped>
    .main-header {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        height: 64px;
        margin: 0 80px;
        color: rgb(1 134 187);

        .mh-left {
            font-size: 20px;

            a:visited {
                color: rgb(1 134 187);
            }
        }

        .mh-middle {
            color: white;
            font-weight: bold;
            font-size: 35px;
        }

        .mh-left,
        .mh-right {
            color: #1cd1ff;
            font-size: 20px;
        }
    }
</style>
